<template>
  <div class="flex-column topo-biz-list">
    <div :class="['search-box', showRight ? 'active' : '']">
      <div class="flex justify-between" :class="['title', showRight ? 'active' : '']">
        <span>
          <i class="iconfont icon-AFScengji" />
          {{ $t('BIZ_INFO') }}
        </span>
      </div>
      <div :class="['search', showRight ? 'active' : '']">
        <div class="flex">
          <el-input
            v-model.trim="queryData.keyword"
            v-filterCharacter
            maxlength="32"
            clearable
            class="mr-10"
            style="width: 224px"
            :placeholder="$t('SERVICE_NAME') + '/' + $t('SERVICE_CODE')"
            @keyup.enter.native="$debounce(search)"
          />
          <el-select
            v-model="queryData.bizStatus"
            clearable
            :placeholder="$t('SERVICE_STATUS')"
            style="width: 224px"
          >
            <el-option
              v-for="item in dictList.BIZ_STATUS"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </div>
        <div class="flex mt-10">
          <el-select
            v-model="stationType"
            clearable
            style="width: 224px"
            class="mr-10"
            :placeholder="$t('SELECT_STATION')"
            @change="selectedIds = []"
          >
            <el-option value="no" :label="$t('NOT_A_Z')" />
            <el-option value="a" :label="$t('TRANS_DIRECT_START')" />
            <el-option value="z" :label="$t('TRANS_DIRECT_END')" />
          </el-select>
          <!-- 区域选择 -->
          <!-- 全部区域 -->
          <region-cascader
            v-show="stationType == 'no' || stationType == ''"
            style="width: 224px"
            :multiple="true"
            :selected-ids="selectedIds"
            @change="stationChange"
          />
          <!-- A端站点 -->
          <region-cascader
            v-show="stationType === 'a' || stationType === 'z'"
            style="width: 224px"
            :selected-ids="selectedIds"
            :placeholder="stationType === 'a' ? 'A_END_STATION_NAME' : 'Z_END_STATION_NAME'"
            :multiple="true"
            @change="
              val => {
                stationType === 'a' ? aStationChange(val) : zStationChange(val)
              }
            "
          />
        </div>
        <div class="mt-10" style="overflow: hidden">
          <!-- Z端站点 -->
          <region-cascader
            v-show="stationType === 'a' || stationType === 'z'"
            style="width: 224px; float: left"
            class="mr-10"
            :selected-ids="selectedIds"
            :placeholder="stationType === 'a' ? 'Z_END_STATION_NAME' : 'A_END_STATION_NAME'"
            :multiple="true"
            @change="
              val => {
                stationType === 'a' ? zStationChange(val) : aStationChange(val)
              }
            "
          />
          <div style="float: right">
            <el-button type="primary" @click="$debounce(resetOption)">
              {{ $t('RESTORE_DEFAULT_SETTINGS') }}
            </el-button>
            <el-button type="primary" @click="$debounce(search)">
              {{ $t('QUERY') }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-1" style="overflow-y: scroll">
      <el-row
        v-for="item in tableData"
        :key="item.bizId"
        class="biz-list p-10 ml-10 mr-10 mb-10"
        :class="item.selected ? 'active' : ''"
        @click.native="debounce(clickEvent, $event, item)"
      >
        <div class="biz-header flex">
          <p class="biz-status" :class="[cellClass(item)]">
            {{ dictMap.BIZ_STATUS[item.bizStatus] }}
          </p>
          <el-tooltip class="item" :content="item.bizName" placement="top">
            <p class="biz-name flex-1">{{ item.bizName }}</p>
          </el-tooltip>
          <el-dropdown v-if="!getIsOtdrTesting" class="dropdown-btn">
            <span class="el-dropdown-link">
              {{ $t('OPERATE') }}
              <i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown" class="el-select-dropdown">
              <el-dropdown-item v-for="btn in item.btns" :key="btn.label">
                <el-button
                  v-show="btn.show"
                  :key="btn.label"
                  class="w-100"
                  style="text-align: left"
                  :disabled="btn.disabled"
                  type="text"
                  size="mini"
                  @click="operate(item, btn.key)"
                >{{ $t(btn.label) }}</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="biz-body">
          <p class="biz-name">
            {{ $t('A_END_STATION') }}：{{ `${item.startRegionName}-${item.startStationName}` }}
          </p>
          <p class="biz-name">
            {{ $t('Z_END_STATION') }}：{{ `${item.endRegionName}-${item.endStationName}` }}
          </p>
        </div>
      </el-row>
    </div>
    <el-pagination
      class="mt-10 flex flex-wrap align-center"
      style="white-space: normal; overflow: hidden; height: 65px"
      layout="total, sizes, prev, pager, next, jumper"
      background
      small
      :current-page="pageData.page"
      :page-size="pageData.size"
      :total="pageData.total"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
    <!-- 通道列表 -->
    <segment-detail
      :visible="showSegment"
      :row-data="rowData"
      @close="close"
      @reload="reload"
      @showTestResult="showTestResult"
    />
    <!-- 编辑基本信息 -->
    <edit :visible="showEdit" :row-data="rowData" @close="close" />
    <test-params
      :visible.sync="showParams"
      type-name="bizList"
      :cur-otdr-param="{}"
      @saveParam="saveParam"
    />
    <test-result
      :visible.sync="showResult"
      :row-data="rowData"
      @showTestChannel="showTestChannel"
      @showTestResult="showTestResult"
    />
    <line-detail :row-data="rowData" :visible="lineDetailShow" @close="lineDetailShow = false" />
    <log-detail
      :task-data="rowData"
      :visible.sync="taskLogVisible"
      @close="taskLogVisible = false"
    />
    <!-- 故障定位 -->
    <fault-location
      :visible="showLocation"
      :location-data="locationData"
      :row-data="rowData"
      @close="close"
    />
  </div>
</template>
<script>
  import { mapGetters, mapMutations } from 'vuex'
  import { getParentsById } from '@/utils/common'
  import bizOpenApi from '@/api/oen/BizOpenApi'
  import bizChannelApi from '@/api/oen/BizChannelApi'
  import taskGroupApi from '@/api/oen/TaskGroup'
  import faultLocationApi from '@/api/oen/FaultLocationApi'
  import RegionCascader from '@/components/RegionCascader'
  import SegmentDetail from '@/views/module/business/manager/SegmentDetail.vue'
  import Edit from '@/views/module/business/manager/Edit.vue'
  import FaultLocation from '@/views/module/business/manager/FaultLocation'
  import TestParams from '@/views/module/business/manager/components/otdrTest/TestParams'
  import TestResult from '@/views/module/business/manager/components/otdrTest/TestResult'
  import LineDetail from '@/views/module/link/record/components/LineDetail'
  import LogDetail from '@/views/module/info/process/components/LogDetail'

  export default {
    components: {
      RegionCascader,
      SegmentDetail,
      Edit,
      FaultLocation,
      TestParams,
      TestResult,
      LineDetail,
      LogDetail
    },
    props: {
      showRight: Boolean,
      params: {
        type: Object,
        default: () => {}
      }
    },
    inject: ['functionName', 'parentVM'],
    data() {
      return {
        queryData: {
          keyword: '',
          startStationIdList: [],
          endStationIdList: [],
          bizStatus: '',
          stationIdList: []
        },
        selectedIds: [],
        stationType: '',
        pageData: {
          page: 1,
          size: 20,
          total: 0
        },
        tableData: [],
        rowData: {},
        showSegment: false,
        showEdit: false,
        showLocation: false,
        locationData: {},
        selectedCableIds: [],
        selectedNodeIds: [],
        debounceTimer: null,
        oldTableData: {
          // '010c44fde4a8410e8ea704ca9b188fef': 'NORMAL'
        },
        showParams: false,
        showResult: false,
        lineDetailShow: false,
        taskLogVisible: false
      }
    },
    computed: {
      ...mapGetters([
        'baseRegionList',
        'regionTree',
        'dictList',
        'dictMap',
        'gisActived',
        'getIsOtdrTesting'
      ]),
      permission() {
        return this.$store.getters.getAuthData('biz:manager')
      }
    },
    watch: {
      params(newVal, oldVal) {
        // console.log('biz参数变化了', newVal)
        this.rowData = {}
        if (newVal.clickProp === 'selectNode' && this.showRight) {
          // 查询条件改变了
          this.init()
        }
      },
      showRight(newVal, oldVal) {
        // console.log(newVal)
        this.timingGetList(newVal)
        if (!newVal) {
          this.setGisActived({
            cableIds: [],
            nodeIds: [],
            color: ''
          })
        }
      }
    },
    beforeDestroy() {
      this.timingGetList(false)
    },
    methods: {
      ...mapMutations(['setGisActived']),
      timingGetList(timing = true) {
        // 30秒刷新页面
        const that = this
        this.intervalTimer && clearInterval(this.intervalTimer)
        this.intervalTimer = null
        if (!timing) return
        this.intervalTimer = setInterval(() => {
          that.loadData(true)
        }, 30 * 1000)
      },
      init() {
        if (this.params) {
          this.queryData = this.params
          this.stationType = this.params.stationType || ''
          this.selectedIds = this.params.stationIdList || []
          this.loadData()
          this.timingGetList()
        }
      },
      // 区域搜索条件改变
      aStationChange(data) {
        this.queryData.startStationIdList = data
      },
      zStationChange(data) {
        this.queryData.endStationIdList = data
      },
      stationChange(data) {
        this.queryData.stationIdList = data
      },
      resetOption() {
        this.selectedIds = []
        this.queryData = this.$options.data().queryData
        this.search()
      },
      search() {
        this.pageData.page = 1
        this.loadData()
      },
      sizeChange(size) {
        this.pageData.size = size
        this.loadData()
      },
      currentChange(page) {
        this.pageData.page = page
        this.loadData()
      },
      loadData(hideLoading = false) {
        this.queryData.keyword = this.queryData.keyword.trim()
        const queryData = { ...this.queryData }
        queryData.bizStatus = queryData.bizStatus || null
        if (this.stationType === 'no') {
          queryData.startStationIdList = []
          queryData.endStationIdList = []
        }
        bizOpenApi
          .queryPage(queryData, { ...this.pageData, hideLoading: hideLoading })
          .then(res => {
            const statusSort = [
              'FAULT',
              'OPEN_FAIL',
              'RESTORE_FAIL',
              'REDUCTION_FAIL',
              'RETURN_FAIL',
              'OPENING',
              'RESTORING',
              'RETURNING',
              'RESTORE',
              'NORMAL'
            ]
            const listData = res.list || []
            listData.forEach(i => {
              // 根据通道状态显示业务的状态
              const statusIndex = i.bizChannelList.map(z =>
                statusSort.findIndex(j => j === z.bizStatus)
              )
              i.bizStatus = statusSort[Math.min(...statusIndex)]
              i.btns = this.getBtns(i)
              const startRegion = this.getRegionName(i.startStationId)
              const endRegion = this.getRegionName(i.endStationId)
              i.startStationName = startRegion.stationName
              i.startRegionName = startRegion.regionName
              i.endStationName = endRegion.stationName
              i.endRegionName = endRegion.regionName
              if (this.oldTableData[i.bizId] && this.oldTableData[i.bizId] !== i.bizStatus) {
                console.log('业务状态改变了')
                // 业务状态改变了，需要刷新拓扑和gis
                this.$emit('refresh')
              }
            })
            // 自动刷新时，保留业务选中状态
            if (this.rowData.bizId && this.rowData.selected) {
              const currentRowData = listData.find(i => i.bizId === this.rowData.bizId)
              if (currentRowData) {
                currentRowData.selected = this.rowData.selected
                this.rowData = currentRowData
                if (this.showRight) {
                  this.getDetailByBizId(currentRowData.bizId)
                }
              } else {
                this.setGisActived({
                  cableIds: [],
                  nodeIds: [],
                  color: ''
                })
                this.rowData = {}
              }
            }
            // 当前页面数据排序 1根据时间倒序排序2.优先把故障业务排在前面
            listData
              .sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
              .sort((a, b) => {
                const aNum = a.bizChannelList.some(i => i.bizStatus === 'FAULT') ? 1 : 0
                const bNum = b.bizChannelList.some(i => i.bizStatus === 'FAULT') ? 1 : 0
                return bNum - aNum
              })
            this.tableData = listData
            const newTableData = {}
            this.tableData.forEach(i => {
              newTableData[i.bizId] = i.bizStatus
            })
            this.oldTableData = newTableData
            this.pageData.total = res.total
          })
          .catch(() => {
            this.tableData = []
          })
      },
      operate(data, type) {
        this.rowData = data
        switch (type) {
        case 'channel':
          // 修改通道
          this.showSegment = true
          break
        case 'mod':
          // 修改基础信息
          this.showEdit = true
          break
        case 'restore':
          //   智能恢复
          this.$debounce(this.checkRestore, data)
          break
        case 'reduction':
          //   智能还原
          bizChannelApi.getDetailByBizId({ bizId: data.bizId }).then(res => {
            const bizChannelList = res || []
            this.$emit('reduction', {
              ...this.rowData,
              channelList: bizChannelList,
              functionName: this.parentVM.functionName, // 操作日志需要传此类型，判断是topo还是业务管理里执行的还原
              operateType: 'reduction'
            })
          })
          break
        case 'otdrTest':
          this.otTest(this.rowData)
          break
        case 'otdrTestResult':
          this.showResult = true
          break
        case 'setFault':
          this.operateStatus(data, 'fault')
          break
        case 'faultLocation':
          //   故障定位
          this.openLocation()
          break
        case 'trouble_solved':
          this.operateStatus(data, 'normal')
          break
        case 'del':
          this.del(data)
          break
        default:
          break
        }
      },
      // 执行恢复前校验，如果业务正在还原，就不能执行恢复操作
      checkRestore(row) {
        bizOpenApi.reductionInfo({ bizId: row.bizId }).then(res => {
          if (res) {
            this.$message.error(this.$t('NOT_RESTORE'))
          } else {
            bizChannelApi.getDetailByBizId({ bizId: row.bizId }).then(res => {
              const bizChannelList = res || []
              this.$emit('restore', {
                bizData: {
                  ...this.rowData,
                  channelList: bizChannelList
                },
                operateType: 'restore'
              })
            })
          }
        })
      },
      otTest(row) {
        this.$confirm(this.$t('OTDR_TEST_CONFIRM')).then(() => {
          bizChannelApi.getDetailByBizId({ bizId: row.bizId }).then(res => {
            this.rowData.bizChannelList = res
            this.showParams = true
          })
        })
      },
      saveParam(data) {
        console.log('saveParam', data)
        const portList = []
        this.rowData.bizChannelList.forEach(i => {
          const linkData = i.segmentList.map((j, index) => {
            const item = j
            item.startNode.afsStatus = null
            item.endNode.afsStatus = null
            return {
              networkSegment: null,
              segmentChannel: item
            }
          })
          const startPortList = []
          const endPortList = []
          const cableIds = []
          i.segmentList.forEach(j => {
            if (j.startPortCategory === 'VARIABLE_POINT') {
              startPortList.push({
                portId: j.startPortId,
                deviceId: j.startNodeId,
                testDirection: 'Z',
                networkLinkChannelBoList: linkData
              })
            }
            if (j.endPortCategory === 'VARIABLE_POINT') {
              endPortList.push({
                portId: j.endPortId,
                deviceId: j.endNodeId,
                testDirection: 'A',
                networkLinkChannelBoList: linkData
              })
            }
            j.fiber && cableIds.push(j.fiber.cableId)
          })
          let port = null
          let connPort = null
          if (data.direction === 'A') {
            port = endPortList.at(-1)
            connPort = startPortList.at(0)
          }
          if (data.direction === 'Z') {
            port = startPortList.at(0)
            connPort = endPortList.at(-1)
          }
          portList.push({
            ...port,
            cableIds: cableIds,
            connPortId: connPort.portId,
            connDeviceId: connPort.deviceId
          })
        })
        const params = {
          bizId: this.rowData.bizId,
          processName: data.processName,
          linkSegmentId: null,
          otdrParam: data,
          portList: portList,
          bizName: this.rowData.bizName,
          functionName: this.parentVM.functionName
        }
        console.log('params', params)
        bizOpenApi.throughTest(params).then(res => {
          this.$message.success(this.$t('SAVE_SUCCESS'))
          this.showParams = false
          this.$router.push({
            name: 'MENU_PROCESS_LIST',
            params: {
              processId: res.processId,
              taskId: res.taskId
            }
          })
        })
      },
      showTestChannel(data) {
        let testDirection = ''
        this.rowData.bizChannelList = data.portList.map(i => {
          testDirection = i.testDirection
          return {
            segmentList: i.networkLinkChannelBoList.map(j => j.segmentChannel)
          }
        })
        this.rowData.isBizOtdrResult = true
        this.rowData.bizType = 'BIZ_THROUGH'
        this.rowData.testTime = data.testTime
        this.rowData.processId = data.processId
        this.rowData.taskIdList = data.taskId
        this.rowData.testDirection = testDirection
        this.showSegment = true
      },
      showTestResult(data) {
        this.rowData = {
          ...this.rowData,
          ...data,
          isBizOtdrResult: true
        }
        if (!data.processId) {
          this.lineDetailShow = true
          return
        }
        taskGroupApi.getByProcessId({ processId: data.processId }).then(res => {
          if (res.status === 'SUCCESS') {
            this.lineDetailShow = true
          } else if (res.status === 'READY' || res.status === 'PROCESS') {
            this.showResult = false
            this.$router.push({
              name: 'MENU_PROCESS_LIST',
              params: {
                processId: data.processId,
                taskId: [data.taskId]
              }
            })
          } else {
            res.taskList.forEach(i => {
              i.subTaskList.forEach(j => {
                if (j.subTaskId === data.taskId) {
                  this.rowData = {
                    ...this.rowData,
                    ...j
                  }
                  if (j.status !== 'SUCCESS') {
                    this.taskLogVisible = true
                  } else {
                    this.lineDetailShow = true
                  }
                }
              })
            })
          }
        })
      },
      close(load) {
        this.showReduction = false
        this.showEdit = false
        this.showSegment = false
        this.showOpen = false
        this.showLocation = false
        if (load === true) {
          this.loadData()
        }
      },
      reload() {
        this.loadData()
      },
      reset() {
        Object.assign(this.$data, this.$options.data(this))
      },
      // 获取区域/站点/机房
      getRegionName(regionId) {
        const areaList = (getParentsById(this.regionTree, regionId, 'regionId') || []).reverse()
        const obj = {}
        if (areaList.length) {
          obj.stationName = areaList[areaList.length - 1].regionName
          obj.stationId = areaList[areaList.length - 1].regionId
          obj.regionName = areaList
            .slice(0, areaList.length - 1)
            .map(item => item.regionName)
            .join('/')
          obj.regionId = areaList.slice(0, areaList.length - 1).map(item => item.regionId)
        }
        return obj
      },
      // 区域权限判断控制
      regionAuthor(row) {
        return (
          (this.baseRegionList.some(i => i.regionId === row.startStationId) &&
            this.baseRegionList.some(i => i.regionId === row.endStationId)) ||
          this.getUserId === 'admin'
        )
      },
      // 执行恢复前校验，如果业务正在还原，就不能执行恢复操作
      restore(row) {
        bizOpenApi.reductionInfo({ bizId: row.bizId }).then(res => {
          if (res) {
            this.$message.error(this.$t('NOT_RESTORE'))
          } else {
            this.operate(row, 'restore')
          }
        })
      },
      openLocation() {
        faultLocationApi.ready({ bizId: this.rowData.bizId }).then(res => {
          this.locationData = res
          this.showLocation = true
        })
      },
      // 修改业务状态
      operateStatus(data, status) {
        this.$confirm(this.$t(status === 'fault' ? 'CONFIRM_BIZ_FAULT' : 'CONFIRM_BIZ_NORMAL'), {
          type: 'warning'
        })
          .then(() => {
            const apiPost = status === 'fault' ? 'bizFault' : 'bizNormal'
            bizOpenApi[apiPost]({
              bizId: data.bizId,
              bizName: data.bizName,
              functionName: this.parentVM.functionName
            }).then(res => {
              if (res) {
                this.loadData()
                this.$message.closeAll()
                this.$emit('close')
                this.$message.success(this.$t('MODIFY_SUCCESS'))
              }
            })
          })
          .catch(() => {})
      },
      // 删除
      del(row) {
        this.$confirm(
          this.$t('CONFIRM_DELETION_PROMPT_TIP', { key: this.$t('BUSINESS'), value: row.bizName }),
          {
            type: 'warning'
          }
        )
          .then(() => {
            bizOpenApi
              .delByBizId({
                bizId: row.bizId,
                bizName: row.bizName,
                functionName: this.parentVM.functionName
              })
              .then(res => {
                if (res) {
                  this.$message.success(this.$t('DELETE_SUCCESS'))
                  this.loadData()
                }
              })
          })
          .catch(() => {})
      },
      cellClass(row) {
        const statusColor = [
          {
            value: 'fault',
            keys: ['FAULT']
          },
          {
            value: 'doing',
            keys: [
              'OPENING',
              'RESTORING',
              'RETURNING',
              'OPEN_FAIL',
              'RESTORE_FAIL',
              'REDUCTION_FAIL',
              'RETURN_FAIL'
            ]
          },
          {
            value: 'normal',
            keys: ['RESTORE', 'NORMAL']
          }
        ]
        const colorData = statusColor.find(i => i.keys.includes(row.bizStatus))
        return 'color-' + (colorData ? colorData.value : 'normal')
      },
      clickEvent(e, data) {
        if (
          e.target.className.includes('el-dropdown') ||
          e.target.className.includes('arrow-down')
        ) {
          return
        }
        // if (this.rowData.bizId && this.rowData.bizId !== data.bizId) {
        // 切换选择，上一个状态重置
        this.tableData.forEach(i => {
          i.selected = i.bizId === data.bizId ? !data.selected : false
          if (i.bizId === this.rowData.bizId) {
            i.selected = false
          }
        })
        // }
        // this.$set(data, 'selected', !data.selected)
        this.rowData = data
        if (this.rowData.selected) {
          this.getDetailByBizId(this.rowData.bizId)
        } else {
          this.rowData = {}
          this.setGisActived({
            cableIds: [],
            nodeIds: [],
            color: ''
          })
        }
      },
      getDetailByBizId(bizId) {
        bizChannelApi.getDetailByBizId({ bizId: bizId }).then(res => {
          const bizChannelList = res
          let cableIds = []
          const stations = []
          bizChannelList.forEach((j, pIndex) => {
            const cableId = j.segmentList
              .filter(i => {
                stations.push(i.startNode.stationId, i.endNode.stationId)
                return i.fiber
              })
              .map(i => i.fiber.cableId)
            cableIds = [...cableIds, ...cableId]
          })
          this.setGisActived({
            cableIds: Array.from(new Set(cableIds)),
            nodeIds: Array.from(new Set(stations)),
            color: this.cellClass(this.rowData)
            // color: 'highLight'
          })
        })
      },
      debounce(func, ...args) {
        const context = this
        if (this.debounceTimer) clearTimeout(this.debounceTimer)
        const callNow = !this.debounceTimer // 是否立即执行
        this.debounceTimer = setTimeout(() => {
          this.debounceTimer = null
        }, 500)
        if (callNow) func.apply(context, args)
      },
      // 获取操作按钮
      getBtns(row) {
        const unlocked =
          !row.bizChannelList.some(i => i.lockStatus === 'LOCKED') && this.regionAuthor(row)
        const bizStatus = row.bizChannelList.map(i => i.bizStatus)
        const managerBtn = [
          {
            key: 'channel', // 查看通道
            show: this.permission.channel,
            label: 'CHANNEL'
          },
          {
            key: 'mod', // 修改名称
            show: unlocked && this.permission.mod,
            label: 'MOD'
          },
          {
            key: 'restore', // 恢复
            show: this.getBtnShow(row, unlocked, bizStatus, 'restore'),
            label: 'INTELLIGENCE_RECOVERY'
          },

          {
            key: 'restore', // 重新恢复
            show: this.getBtnShow(row, unlocked, bizStatus, 'toRestore'),
            label: 'TO_RESTORE'
          },
          {
            key: 'reduction', // 智能还原
            show: this.getBtnShow(row, unlocked, bizStatus, 'reduction'),
            label: 'REDUCTION'
          },
          {
            key: 'otdrTest', // OTDR测试
            show: this.getOtdrTestBtn(row, unlocked, bizStatus, 'otdrTest'),
            label: 'BIZ_FUNC_OTDR_TEST'
          },
          {
            key: 'otdrTestResult', // OTDR测试记录
            show: this.getOtdrTestBtn(row, unlocked, bizStatus, 'otdrTestResult'),
            label: 'BIZ_FUNC_OTDR_TEST_RESULT'
          },
          {
            key: 'setFault', // 设为故障
            show:
              unlocked &&
              bizStatus.every(i => ['RESTORE', 'NORMAL'].includes(i)) &&
              this.permission.setFault,
            label: 'SET_FAIL'
          },
          {
            key: 'faultLocation', // 故障定位
            show:
              unlocked &&
              this.permission.faultLocation &&
              bizStatus.every(i => i === 'RESTORE') &&
              row.openType !== 'INDEPENDENT',
            label: 'FAULT_LOCATION'
          },

          {
            key: 'trouble_solved', // 故障已排除
            show: unlocked && bizStatus.every(i => i === 'FAULT') && this.permission.faultsolved,
            label: 'TROUBLE_SOLVED'
          },
          {
            key: 'del', // 删除
            show: unlocked && this.permission.del,
            disabled:
              bizStatus.some(i => ['OPENING', 'RESTORING', 'RETURNING'].includes(i)) && unlocked,
            label: 'DEL'
          }
        ]
        // console.log('managerBtn', managerBtn)
        return managerBtn.filter(i => i.show)
      },
      getBtnShow(row, unlocked, bizStatus, key) {
        let visiable = false
        switch (key) {
        case 'restore':
          visiable =
            unlocked &&
            row.openType !== 'INDEPENDENT' &&
            bizStatus.every(i => ['FAULT', 'REDUCTION_FAIL', 'RETURN_FAIL'].includes(i)) &&
            this.permission.restore
          break
        case 'toRestore':
          visiable = unlocked && bizStatus.includes('RESTORE_FAIL') && this.permission.restore
          break
        case 'reduction':
          visiable =
            unlocked &&
            bizStatus.every(i => i === 'RESTORE') &&
            this.permission.reduction &&
            row.bizLevel === 'IMPORTANT'
          break
        default:
          visiable = false
        }
        return visiable
      },
      getOtdrTestBtn(row, unlocked, bizStatus) {
        return (
          row.openType !== 'INDEPENDENT' &&
          (bizStatus.every(i => ['RESTORE', 'NORMAL'].includes(i)) ||
            bizStatus.includes('FAULT')) &&
          unlocked &&
          this.permission.otdrtest
        )
      },
      getBackBtn(row) {
        return (
          this.pageName === 'backup' &&
          this.backupPermission.mod &&
          this.regionAuthor(row) &&
          row.openType !== 'INDEPENDENT'
        )
      }
    }
  }
</script>
<style lang="scss">
  @import '@/assets/css/mixin.module.scss';
  .topo-biz-list {
    .search-box {
      overflow: hidden;
      .title {
        @include themeify {
          color: themed('textColor');
        }
        &.active {
          padding-left: 10px;
          height: 30px;
          line-height: 30px;
          @include themeify {
            color: #fff;
            background: themed('topoBizListTitle');
          }
        }
      }
      .search {
        margin: 10px;
      }
      .search-btn {
        line-height: 30px;
        cursor: pointer;
      }
      &.active {
        @include themeify {
          // border: 1px solid themed('homeBorderColor');
          // box-shadow: themed('bigBorderColor') 0px 0px 20px inset;
        }
      }
    }
    .biz-list {
      @include themeify {
        color: themed('topoDesFontColor');
        border: 1px solid themed('topoBorderColor');
      }
      .biz-header {
        height: 30px;
        .biz-status {
          width: 100px;
          text-align: left;
          line-height: 30px;
        }
        .color-fault {
          @include themeify {
            color: themed('bizFault');
          }
        }
        .color-doing {
          @include themeify {
            color: themed('bizDoing');
          }
        }
        .color-normal {
          @include themeify {
            color: themed('bizNormal');
          }
        }
        .biz-name {
          // white-space: nowrap;
          white-space: pre;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 30px;
          @include themeify {
            color: themed('topoFontColor');
          }
        }
      }
      .dropdown-btn {
        @include themeify {
          color: themed('topoMoreFontColor');
        }
      }
      &:hover {
        cursor: pointer;
        @include themeify {
          box-shadow: themed('bigBorderColor') 0px 0px 10px inset;
        }
      }
      &.active {
        @include themeify {
          box-shadow: themed('bigBorderColor') 0px 0px 20px inset;
        }
      }
    }
  }
</style>
